<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/page.css">
    <script src="../js/common.js"></script>

    <!-- <script src="../js/ajax.js"></script> -->
    <script src="../js/jquery-3.1.1.min.js"></script>
    <script src="../js/Page.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        .wrap {
            width: 1200px;
            margin: 0 auto;
        }

        .wrap table {
            width: 100%;
            table-layout: fixed;
            border: 1px solid #333;
            border-collapse: collapse;
            line-height: 32px;
            text-align: center;
        }

        .wrap table td,
        .wrap table th {
            border: 1px solid #333;
            overflow: hidden;
        }

        .search_bar {
            overflow: hidden;
            margin-top: 50px;
            margin-bottom: 10px;
        }

        .search_bar .searchBox {
            float: left;
            border: 1px solid gray;
        }

        .search_bar .searchBox input {
            height: 30px;
            width: 300px;
            float: left;
            border: 0;
            outline: none;
            text-indent: 10px;
        }

        .search_bar .searchBox button {
            height: 30px;
            width: 60px;
            float: left;
            box-sizing: content-box;
            border: 0;
            outline: none;
        }

        .search_bar .searchBox {
            overflow: hidden;
        }

        .search_bar .orderBox {
            float: left;
            line-height: 30px;
        }

        .search_bar .orderBox>*>label {
            margin-right: 10px;
        }

        .search_bar .orderBox>* {
            margin-left: 20px;
            float: left;
            border: 1px dashed #333;
            padding: 0 20px;
        }

        .search_bar .orderBox .showNumBox {
            border: 0;
        }

        .search_bar select {
            vertical-align: middle;
            height: 30px;
            padding: 0 5px;
        }

        .pageChangeBox {
            text-align: center;
            margin-top: 20px;

        }

        .pageChangeBox button {
            height: 32px;
            width: 60px;
        }

        .pageChangeBox button:nth-child(2) {
            margin-left: 50px;
        }

        .goodsList ul {
            overflow: hidden;
            min-height: 620px;
        }

        .goodsList ul li {
            float: left;
            width: 20%;
            box-sizing: border-box;
            padding: 10px;
        }

        .goodsList ul li img {
            width: 100%;
        }

        .price {
            color: red;
        }

        .title {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="box">
        你好,<a href="./login.html">请登录</a>
        <a href="./goodsList.html">商品列表</a>
    </div>
    <div class="wrap">
        <div class="search_bar">
            <div class="searchBox">
                <input type="text" class="searchCon">
                <button class="searchBtn">搜索</button>
            </div>
            <div class="orderBox">
                <div class="orderColBox">
                    <label>
                        编号
                        <input type="radio" checked name="orderCol" class="orderCol" value="u_id">
                    </label>
                    <label>
                        用户名
                        <input type="radio" name="orderCol" class="orderCol" value="user">
                    </label>
                    <label>
                        手机号
                        <input type="radio" name="orderCol" class="orderCol" value="phone">
                    </label>
                    <label>
                        邮箱
                        <input type="radio" name="orderCol" class="orderCol" value="email">
                    </label>
                </div>

                <div class="orderTypeBox">
                    <label>
                        升序
                        <input type="radio" checked name="orderType" class="orderType" value="asc">
                    </label>
                    <label>
                        降序
                        <input type="radio" name="orderType" class="orderType" value="desc">
                    </label>
                </div>

                <div class="showNumBox">
                    <select class="select">
                        <option value="5">每页显示05条</option>
                        <option value="10" selected>每页显示10条</option>
                        <option value="15">每页显示15条</option>
                        <option value="20">每页显示20条</option>
                    </select>
                </div>


            </div>
        </div>
        <div class="goodsList">
            <ul>
                <li>
                    <a href="">
                        <img src="https://img11.360buyimg.com/n7/jfs/t1/88913/14/1277/360157/5dbc0d7eE921d1187/b5b6a9c4a2c58c7b.jpg"
                            alt="">
                        <p class="price">￥5599.00</p>
                        <p class="title">Apple iPhone 11 (A2223) 128GB 紫色 移动联通电信4G手机 双卡双待</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="https://img11.360buyimg.com/n7/jfs/t1/88913/14/1277/360157/5dbc0d7eE921d1187/b5b6a9c4a2c58c7b.jpg"
                            alt="">
                        <p class="price">￥5599.00</p>
                        <p class="title">Apple iPhone 11 (A2223) 128GB 紫色 移动联通电信4G手机 双卡双待</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="https://img11.360buyimg.com/n7/jfs/t1/88913/14/1277/360157/5dbc0d7eE921d1187/b5b6a9c4a2c58c7b.jpg"
                            alt="">
                        <p class="price">￥5599.00</p>
                        <p class="title">Apple iPhone 11 (A2223) 128GB 紫色 移动联通电信4G手机 双卡双待</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="https://img11.360buyimg.com/n7/jfs/t1/88913/14/1277/360157/5dbc0d7eE921d1187/b5b6a9c4a2c58c7b.jpg"
                            alt="">
                        <p class="price">￥5599.00</p>
                        <p class="title">Apple iPhone 11 (A2223) 128GB 紫色 移动联通电信4G手机 双卡双待</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="https://img11.360buyimg.com/n7/jfs/t1/88913/14/1277/360157/5dbc0d7eE921d1187/b5b6a9c4a2c58c7b.jpg"
                            alt="">
                        <p class="price">￥5599.00</p>
                        <p class="title">Apple iPhone 11 (A2223) 128GB 紫色 移动联通电信4G手机 双卡双待</p>
                    </a>
                </li>

            </ul>
        </div>
        <div class="pageChangeBox">
            <div class="pageBox"></div>
        </div>
    </div>
</body>

<script>

    if (getCookie("logUser")) {
        box.textContent = `欢迎您,${getCookie("logUser")}`;
    }

    // 默认值
    var key = "";
    var orderCol = "id";
    var orderType = "asc";
    var showNum = 10;
    var currentPage = 0;

    // goodsImg: "//img13.360buyimg.com/n5/jfs/t1/97407/9/11234/118034/5e3117d3E6dc71246/3da18d5c8972eee2.jpg"


    /*    $.ajax({
           url: "../php/goodsList.php",
           dataType: "json",
           success(data) {
               console.log(data);
               var html = "";
               data.forEach(({ goodsId, goodsImg, goodsImgList, goodsName, goodsPrice }) => {
                   html += ` <li>
                       <a href="">
                           <img src="${goodsImg.replace("n5", "n1")}"
                               alt="">
                           <p class="price">￥${goodsPrice}</p>
                           <p class="title">${goodsName}</p>
                       </a>
                   </li>`;
               });
               $(".goodsList ul").html(html);
           },
           // error(err) {
           //     console.log(err);
           // }
       }) */


    // http://localhost/2003/demo_34/php/goodsList.php?key=&orderCol=id&orderType=asc&currentPage=0&showNum=20

    // allsettled



    // 搜索 排序 和改变showNum时重新调用此方法  => 重新生成分页 和 新的数据
    searchDataAndPage();

    // 查询数据  进行分页
    function searchDataAndPage() {
        getData().then(data => {
            var { count, pageCountMax, list } = data;

            new Page(".pageChangeBox .pageBox", {
                count,
                showNum,
                showPage: 5,
                callback(index) {
                    // console.log(index);
                    currentPage = index;
                    loadHtml();
                }
            })

        }).catch(err => {
            throw err;
        });
    }


    // 查询数据  进行动态生成
    function loadHtml() {
        getData().then(data => {
            var { count, currentPage, pageCountMax, list } = data;
            console.log(data);
            var html = "";
            list.forEach(({ goodsId, goodsImg, goodsImgList, goodsName, goodsPrice }) => {
                html += ` <li>
                            <a href="./goodsDetail.html?gid=${goodsId}">
                                <img src="${goodsImg.replace("n5", "n1")}"
                                    alt="">
                                <p class="price">￥${goodsPrice}</p>
                                <p class="title">${goodsName}</p>
                            </a>
                        </li>`;
            });
            $(".goodsList ul").html(html);

        }).catch(err => {
            throw err;
        });
    }







    function getData() {
        console.log(currentPage);
        return new Promise(function (resolve, reject) {
            $.ajax({
                url: "../php/goodsList.php",
                data: {
                    key,
                    orderCol,
                    orderType,
                    currentPage,
                    showNum,
                },
                dataType: "json",
                success(data) {
                    resolve(data);
                },
                error(err) {
                    console.log(err);
                    reject(err);
                }
            })
        })
    }



     // loadHTML();
    // function loadHTML() {
    //     getData().then(data => {
    //         var { count, currentPage, pageCountMax, list } = data;
    //         console.log(data);
    //         var html = "";
    //         list.forEach(({ goodsId, goodsImg, goodsImgList, goodsName, goodsPrice }) => {
    //             html += ` <li>
    //                        <a href="">
    //                            <img src="${goodsImg.replace("n5", "n1")}"
    //                                alt="">
    //                            <p class="price">￥${goodsPrice}</p>
    //                            <p class="title">${goodsName}</p>
    //                        </a>
    //                    </li>`;
    //         });
    //         $(".goodsList ul").html(html);

    //         new Page(".pageChangeBox .pageBox", {
    //             count,
    //             showNum,
    //             showPage: 5,
    //             callback(index) {
    //                 console.log(index);
    //                 // loadHTML()
    //             }
    //         })

    //     }).catch(err => {
    //         throw err;
    //     });
    // }




</script>

</html>